import React from 'react';
import {Router, Route, Link} from 'react-router';
import utils from '../../js/utils';

import Header from './Header.jsx'
import Left from './Left.jsx'


class Index extends React.Component {
  constructor () {
    super();
    this.state = {
      admin: {},
      list: [],
      size: 0,
      project_setting_status: false,
      cur_project: {},
      cur_project_id: '',

      page: 0,
      page_status: true,
    }
  }

  componentDidMount () {

    let _this = this;
    utils.post('/get_admin_data', {}, function (res) {
      console.log(res);
      if (parseInt(res.code) != 200) {
        window.location = "/#/login";
        $.cookie("token", null);
        return
      }

      _this.setState({
        admin: res.admin
      })
    })

    let project_progress_one = $(this.refs.project_progress_one).find("option:selected").attr('data-id');
    let pay_progress_one = $(this.refs.pay_progress_one).find("option:selected").attr('data-id');

    utils.post('/get_all_customer_project_list', {page: 1, project_progress_one, pay_progress_one}, function (res) {
      console.log(res);
      if (parseInt(res.code, 10) == 200) {
        _this.setState({
          list: res.list,
          size: res.size
        })
      }
    })
  }

  searchArticle () {

    let title = this.refs.article_title.value.trim();
    let page = 1;

    let _this = this;

    let project_progress_one = $(this.refs.project_progress_one).find("option:selected").attr('data-id');
    let pay_progress_one = $(this.refs.pay_progress_one).find("option:selected").attr('data-id');

    utils.post('/search_project_from_title', {title, page, project_progress_one, pay_progress_one}, function (res) {

      console.log(res);
      if (parseInt(res.code, 10) == 200) {
        _this.setState({
          list: res.list,
          size: res.size
        })
        return
      }

      $('.modal-body').text(res.errmsg);
      $('#myModal').modal('show');
    })
  }

  edit_project_setting (event) {
    let ele = event.target || event.srcElement;
    let id = $(ele).attr("data-id");
    let project = JSON.parse($(ele).attr("data-project"));

    console.log(project);

    this.setState({
      project_setting_status: true,
      cur_project: project,
      cur_project_id: id
    })

    $(this.refs.designer_id).val(project.designer_id);
    $(this.refs.front_money).val(project.front_money);
    $(this.refs.total_money).val(project.total_money);
    $(this.refs.end_project_time).val(project.end_project_time);
    $(this.refs.project_progress).find("option[data-id='"+ project.project_progress +"']").attr("selected",true);
    $(this.refs.pay_progress).find("option[data-id='"+ project.pay_progress +"']").attr("selected",true);
  }

  backList () {
    this.setState({
      project_setting_status: false
    })
  }

  submit () {

    let designer_id = $(this.refs.designer_id).val().trim();
    let front_money = $(this.refs.front_money).val().trim();
    let total_money = $(this.refs.total_money).val().trim();
    let project_progress = $(this.refs.project_progress).find("option:selected").attr('data-id');
    let pay_progress = $(this.refs.pay_progress).find("option:selected").attr('data-id');
    let cur_project_id = this.state.cur_project_id;
    let end_project_time = $(this.refs.end_project_time).val().trim();

    let data = {
      designer_id,
      front_money,
      total_money,
      project_progress,
      pay_progress,
      cur_project_id,
      end_project_time
    }

    console.log(data);

    if (!utils.checkValue(designer_id)) {
      $('.modal-body').text("请输入设计师的编号");
      $('#myModal').modal('show');
      return
    }

    if (!utils.checkValue(front_money)) {
      $('.modal-body').text("请填写项目定金");
      $('#myModal').modal('show');
      return
    }

    if (!utils.checkValue(total_money)) {
      $('.modal-body').text("请填写项目金额");
      $('#myModal').modal('show');
      return
    }

    if (!utils.checkValue(end_project_time)) {
      $('.modal-body').text("请填写交稿时间");
      $('#myModal').modal('show');
      return
    }

    let _this = this;
    utils.post('/update_project_progress', data, function (res) {
      $('.modal-body').text(res.errmsg);
      $('#myModal').modal('show');

      if (parseInt(res.code, 10) == 200) {
        _this.setState({
          project_setting_status: false,
        })
        // window.location.href = "/";

        utils.post('/get_all_customer_project_list', {page: 1}, function (res) {
          console.log(res);
          if (parseInt(res.code, 10) == 200) {
            _this.setState({
              list: res.list,
              size: res.size
            })
          }
        })
      }
    })
  }

  data_prev () {
    let page = this.state.page -1 <= 0 ? 0 : this.state.page -1;
    this.setState({
      page: page
    })
    let _this = this;
    let project_progress_one = $(this.refs.project_progress_one).find("option:selected").attr('data-id');
    let pay_progress_one = $(this.refs.pay_progress_one).find("option:selected").attr('data-id');
    utils.post('/get_all_customer_project_list', {page: page, project_progress_one, pay_progress_one}, function (res) {
      console.log(res);
      if (parseInt(res.code, 10) == 200) {
        _this.setState({
          list: res.list,
          size: res.size
        })
      }
    })
  }

  data_next () {
    let page = (this.state.page + 1 >= Math.ceil(this.state.size / 30) ? Math.ceil(this.state.size / 30) : (this.state.page + 1));
    this.setState({
      page: page
    })
    let _this = this;
    let project_progress_one = $(this.refs.project_progress_one).find("option:selected").attr('data-id');
    let pay_progress_one = $(this.refs.pay_progress_one).find("option:selected").attr('data-id');
    utils.post('/get_all_customer_project_list', {page: page, project_progress_one, pay_progress_one}, function (res) {
      console.log(res);
      if (parseInt(res.code, 10) == 200) {
        _this.setState({
          list: res.list,
          size: res.size
        })
      }
    })
  }

  project_progress_change (e) {
    let ele = e.target || e.srcElement;
    let id = $(ele).find("option:selected").attr('data-id');

    if (parseInt(id, 10) == -1) {
      return
    }
  }

  render () {
    let edit_project_setting = this.edit_project_setting.bind(this);
    return (
      <div>
        <div className='bamboo-nav'>当前位置：项目管理</div>
          <div className='bamboo-content' style={{minHeight: (window.innerHeight - 75 - 65) + 'px'}}>
            <div className="bamboo-articles-header" style={{display: !this.state.project_setting_status ? "block" : "none"}}>
              <div>
                <div>
                  <span>项目进度</span>
                  <select className="select-class" ref="project_progress_one">
                    <option data-id="-1">未选择</option>
                    <option data-id="0">未处理</option>
                    <option data-id="1">进行中</option>
                    <option data-id="2">已完成</option>
                  </select>
                </div>
                <div>
                  <span>付款进度</span>
                  <select className="select-class" ref="pay_progress_one">
                    <option data-id="-1">未选择</option>
                    <option data-id="0">未付款</option>
                    <option data-id="1">已付定金</option>
                    <option data-id="2">已付全款</option>
                  </select>
                </div>
                <input type="text" className="form-control" ref="article_title" placeholder="项目编号/项目名称"/><a onClick={this.searchArticle.bind(this)} href="javascript:void(0)" className="bamboo-btn-green">查找</a><span>（共计{this.state.size}个项目）</span>
              </div>
            </div>

            <div className="bamboo-articles-list" style={{display: !this.state.project_setting_status ? "block" : "none"}}>
              <table className='bamboo-table'>
                <thead>
                  <tr>
                    <th>项目编号</th>
                    <th>客户姓名</th>
                    <th>分配设计师</th>
                    <th>联系电话</th>
                    <th>项目分类</th>
                    <th>需求描述</th>
                    <th>下单时间</th>
                    <th>金额</th>
                    <th>项目进度</th>
                    <th>付款进度</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  {
                    this.state.list.map(function (item, idx) {
                      return <tr key={idx}>
                        <td style={{width: "8rem"}}>{item.pid}</td>
                        <td style={{width: "10rem"}}>{item.unit_user_name}</td>
                        <td style={{width: "10rem"}}>{item.designer_name}</td>
                        <td style={{width: "10rem"}}>{item.unit_phone == "" ? item.uname : item.unit_phone}</td>
                        <td style={{width: "10rem"}}>{item.project_type}</td>
                        <td style={{width: "20rem"}}>{item.project_description}</td>
                        <td style={{width: "10rem"}}>{item.created_at}</td>
                        <td style={{width: "10rem"}}>￥{item.total_money}</td>
                        <td style={{width: "10rem"}}>
                          {item.project_progress == 0 ? "未处理" : item.project_progress == 1 ? "进行中" : "已完成"}
                        </td>
                        <td style={{width: "10rem"}}>
                          {item.pay_progress == 0 ? "未付款" : item.pay_progress == 1 ? "已付定金" : "已付全款"}
                        </td>
                        <td style={{width: "10rem"}}>
                          <a className='bamboo-btn-green btn-sm' href="javascript:void(0)" data-id={item['_id']['$oid']} data-project={JSON.stringify(item)} onClick={edit_project_setting}>编辑</a>
                        </td>
                      </tr>
                    })
                  }
                </tbody>
              </table>

              <div className='xlb-data-page' style={{display: this.state.page_status ? "block" : "none"}}>
                <div style={{display: 'inline-block'}}>
                  <a onClick={this.data_prev.bind(this)} className="btn btn-success">上一页</a>
                  <a onClick={this.data_next.bind(this)} className="btn btn-warning">下一页</a>
                </div>
                <span>当前第<span>{this.state.page + 1}</span>页</span>
                <span>共<span>{Math.ceil(this.state.size / 30)}</span>页</span>
              </div>
            </div>

            <div className="bamboo-project-setting" style={{display: this.state.project_setting_status ? "block" : "none"}}>
              <div>
                <a href="javascript:void(0)" onClick={this.backList.bind(this)}>返回</a>
              </div>
              <div>
                <h3>项目：{this.state.cur_project.project_name}</h3>
                <div>
                  <span>指定设计师</span>
                  <input type="text" placeholder="请输入设计师编号" className="form-control" ref="designer_id"/>
                </div>
                <div>
                  <span>项目定金</span>
                  <input type="text" placeholder="请填写数字" className="form-control" ref="front_money"/>
                </div>
                <div>
                  <span>项目金额</span>
                  <input type="text" placeholder="请填写数字" className="form-control" ref="total_money"/>
                </div>
                <div>
                  <span>交稿时间</span>
                  <input type="text" placeholder="2019-01-22" className="form-control" ref="end_project_time"/>
                </div>
                <div>
                  <span>项目进度</span>
                  <select ref="project_progress">
                    <option data-id="0">未处理</option>
                    <option data-id="1">进行中</option>
                    <option data-id="2">已完成</option>
                  </select>
                </div>
                <div>
                  <span>付款进度</span>
                  <select ref="pay_progress">
                    <option data-id="0">未付款</option>
                    <option data-id="1">已付定金</option>
                    <option data-id="2">已付全款</option>
                  </select>
                </div>
                <div>
                  <a className="bamboo-btn-green" href="javascript:void(0)" onClick={this.submit.bind(this)}>确定</a>
                </div>
              </div>
            </div>
          </div>
      </div>
    )
  }
}


class App extends React.Component {
  constructor () {
    super();
  }

  componentDidMount () {
    // 滚动条
    $('.scrollbar-macosx').scrollbar();
  }

  render () {
    return (
      <div className='bamboo-app'>
        <Left />
        <Header />
        <div className='bamboo-right'>
          <div className='scrollbar-macosx'>
            <div style={{height: (window.innerHeight - 75) + 'px'}}>
              {this.props.children ? this.props.children : <Index />}
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default App;
